<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
    .container {
        width: 100%;
    }
</style>
<div id="member-app" class="dashboard-container">
    <div class="container">
        <div class="tableBar">
            <div class="el-input el-input--prefix el-input--suffix" style="width: 250px;">
                <input type="text" autocomplete="off" placeholder="请输入用户姓名" class="el-input__inner">
                <span class="el-input__prefix">
                    <i class="el-input__icon el-icon-search" style="cursor: pointer;"></i>
                </span>
            </div>
            <button type="button" class="el-button el-button--primary" id="btn-search">
                <span>查询</span>
            </button>
            <div class="tableLab" >
                <button type="button" class="el-button el-button--primary" id="btn-deletePage">
                    <span>已删除的用户</span>
                </button>
                <!--<input type="file" id="saveUser" style="display: none">
                <button type="button" class="el-button el-button&#45;&#45;primary continue">
                    <label for="saveUser" style="display: inline">
                        <span>上传excel</span>
                    </label>
                </button>
                <button type="button" class="el-button btn-save" style="color: #333333;background-color: #ffc200;border-color: #ffc200">
                    <span>导入</span>
                </button>-->
                <button onclick="exportAll()" type="button" class="el-button continue" style="color: #333333;background-color: #ffc200;border-color: #ffc200">
                    <span>导出所有</span>
                </button>
               <!-- <button type="button" class="el-button el-button&#45;&#45;update" style="color: #333333;background-color: #ffc200;border-color: #ffc200">
                    <span>修改用户</span>
                </button>-->
                <button type="button" class="el-button el-button--primary el-button--add">
                    <span>添加用户</span>
                </button>
                <button id="el-button-delete" type="button" class="el-button continue el-button--delete" style="color: #333333;background-color: #ffc200;border-color: #ffc200">
                    <span>删除用户</span>
                </button>
            </div>
        </div>
        <div class="el-table tableBox el-table--fit el-table--striped el-table--enable-row-hover">
            <div class="hidden-columns">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
            <div class="el-table__header-wrapper">
                <table cellspacing="0" cellpadding="0" border="0" class="el-table__header" style="width: 100%;">
                    <thead class="">
                        <tr class="">
                            <th colspan="1" rowspan="1" class="el-table_1_column_1   #tbody  is-leaf" style="width: 25px;">
                                <div class="cell" style="padding-left: 11px">
                                    <label class="el-checkbox is-disabled">
                                        <span class="el-checkbox__input">
                                            <input type="checkbox" value="" onchange='commonChoiceAll()'>
                                        </span>
                                    </label>
                                </div>
                            </th>
                            <th colspan="1" rowspan="1" class="el-table_1_column_3 is-leaf">
                                <div class="cell">用户姓名</div>
                            </th>
                            <th colspan="1" rowspan="1" class="el-table_1_column_4 is-leaf">
                                <div class="cell">账号</div>
                            </th>
                            <th colspan="1" rowspan="1" class="el-table_1_column_5 is-leaf">
                                <div class="cell">头像</div>
                            </th>
                            <th colspan="1" rowspan="1" class="el-table_1_column_6 is-leaf">
                                <div class="cell">手机号</div>
                            </th>
                            <th colspan="1" rowspan="1" class="el-table_1_column_7 is-leaf">
                                <div class="cell">账号状态</div>
                            </th>
                            <th colspan="1" rowspan="1" class="el-table_1_column_8 is-leaf">
                                <div class="cell">性别</div>
                            </th>
                            <th colspan="1" rowspan="1" class="el-table_1_column_9 is-leaf">
                                <div class="cell">创建时间</div>
                            </th>
                            <th colspan="1" rowspan="1" class="el-table_1_column_10 is-leaf">
                                <div class="cell">修改时间</div>
                            </th>
                            <th colspan="1" rowspan="1" class="el-table_1_column_11 is-center is-leaf" style="width: 153px">
                                <div class="cell">操作</div>
                            </th>
                        </tr>
                    </thead>
                </table>
            </div>
            <div class="el-table__body-wrapper is-scrolling-none">
                <table cellspacing="0" cellpadding="0" border="0" class="el-table__body" style="width: 100%;">
                    <tbody id="tbodyId"></tbody>
                </table>
                <div class="el-table__empty-block" style="height: 100%; width: 100%;display: none">
                    <span class="el-table__empty-text">暂无数据</span>
                </div>
            </div>
            <div class="el-table__column-resize-proxy" style="display: none;"></div>
        </div>
        <div class="pageList el-pagination" id="pageId">

        </div>
    </div>
</div>
<script>
    $(function() {
        //el-button--update
        //tableBar
        $("#cIframe").data("userId","");
        $("#load-user-id").data("isDeletePage", false);
        $(".tableBar").on("click",".el-button--add,.el-button--update",addPage);
        $(".el-button--primary").on("click",doGetObjects);
        $("#btn-deletePage").on("click",doGetObjects);
        $("#el-button-delete").on("click",deleteUserList);
        //$(".btn-save").on("click",saveExport);//导入
        //先加载数据，再查询数据
        $("#pageId").load("page/page",function(){
            doGetObjects();
        })
    })

    /**
     * 导入所有
     */
    /*function saveExport(){
        //获取文件名的路径是虚拟路径
        var fileName = $("#saveUser").val();//获取文件名
        if (!fileName.endsWith(".xlsx")){
            commonShowTips("文件格式有误！请选择.xlsx文件");
            return;
        }
        //判断文件控件的大小不能超过5M
        var uploadFile = $("#saveUser").get(0).files[0];
        if (uploadFile.size > 5 * 1024 * 1024){
            commonShowTips("请将文件大小控制在5M之内");
            return;
        }
        //ajax提供的对象，储存文件相关信息(key-value的形式)
        var forData = new FormData();
        //key的名字自定义,value为文件控件对象
        forData.append("file",uploadFile);
        $("#su").show();
        $.ajax({
            url:"user/saveExportUser",
            data:forData,
            dateType:"json",
            type:"post",
            //提交参数之前是否把参数转换为字符串：true--是，false--不是，默认是true
            processData:false,
            //提交之前，是否把参数统一按URLEncoded编码:true--是，false--不是，默认是true
            contentType:false,
            success:function(result){
                if (result.state == 1) {
                    commonShowTips("用户数据导入成功！");
                    doGetObjects();//刷新数据
                } else{
                    commonShowTips(result.message);
                }
                $("#su").hide();
            }
        })
    }*/
    //导出所有
    function exportAll(){
        //二次导出确认
        if(!confirm("确认导出吗?")){
            return;
        }
        var url = "user/exportAll";
        $.get(url,{},function (result){
            if (result.state == 1){
                commonShowTips("导出成功!");
            }else {
                commonShowTips("导出失败!");
            }
        })
    }
    //批量删除
    function deleteUserList(){
        var checkboxs = $("#tbodyId input[type='checkbox']:checked");
        var ids = [];
        for (var i = 0; i < checkboxs.length; i++) {
            ids.push(checkboxs.eq(i).val());
        }
        if(!ids.length){
            commonShowTips("请至少选择1条要删除的商品数据！");
            return;
        }
        //二次删除确认
        if(!confirm("确认删除吗?")){
            return;
        }
        var url = "user/deleteUser";
        var param ={ids:ids};
        $.get(url,param,function(result){
            if(result.state == 1){
                commonShowTips("成功修改删除状态" + result.data + "条数据！");
                doGetObjects();
            }else{
                commonShowTips(result.message);
            }
        })
    }
    //跳转添加或修改页面
    function addPage() {
        var bool = $(this).hasClass("el-button--update");
        if (bool){
            var radioCheck = $(this).parents("tr").find("input[type='checkbox']");
            if (!radioCheck.length){
                commonShowTips("请选择要修改的数据")
                return;
            }
            $("#cIframe").data("userId",radioCheck.val())
            //拿到当前行绑定的行数据
            var userData = radioCheck.parents("tr").data("user");
            //行数据绑定到大盒子上，为了修改页面拿到数据
            $("#cIframe").data("user",userData);
        }
        $("#cIframe").load("user/add",function () {
            //$(".head-lable").text(title);
        });
    }

    //初始加载
    function doGetObjects() {
        if ($(this).prop("id") == "btn-deletePage") {
            $("#pageId").data("curPage", 1);
            $(".el-input__inner").val("")
            $(this).prop("id", "btn-selectPage");
            $(this).text("未删除的用户");
            $("#load-user-id").data("isDeletePage",true);
        } else if ($(this).prop("id") == "btn-selectPage") {
            $("#pageId").data("curPage", 1);
            $(".el-input__inner").val("")
            $(this).prop("id", "btn-deletePage");
            $(this).text("已删除的用户");
            $("#load-user-id").data("isDeletePage", false);
        } else if ($(this).prop("id") == "btn-search") {
            $("#pageId").data("curPage", 1);
        }
        var url = "user/findUser";
        var curPage = $("#pageId").data("curPage");
        var params = {
            "name" : $(".el-input__inner").val(),
            curPage: curPage ?  curPage : 1,
            pageSize : 10
        };
        if ($("#load-user-id").data("isDeletePage")) {
            params.state = 2;
        }
        $.get(url,params,function(result){
            if(result.state == 0){
                commonShowTips(result.message);
            }else{
                loadRoleData(result.data.pageData);//加载表格主体数据
                setPageData(result.data);//分页
            }
        })
    }
    /*function doGetObjects(){
        var url = "user/findUser";
        var curPage = $("#pageId").data("curPage");
        var params = {
            "name" : $(".el-input__inner").val(),
            "curPage" :curPage ? curPage : 1,
            "pageSize" : 5
        };
        $.get(url,params,function(result){
            if(result.state == 0){
                commonShowTips(result.message);
            }else{
                loadRoleData(result.data.pageData);//加载表格主体数据
                setPageData(result.data);//分页
            }
        })
    }*/

    function loadRoleData(data) {
        var tbody = $("#tbodyId");
        tbody.empty();
        for (var i = 0;i < data.length;i++){
            var d = data[i];
            var tr = "<tr>" +
                "<td class='el-table_1_column_1   el-table-column--selection  is-leaf' style='width: 25px;'><div class='cell' style='padding-left: 11px'>" +
                "<label class='el-checkbox'><span class='el-checkbox__input'>" +
                "<input type='checkbox' id='input-data' aria-hidden='false'' value='" + d.id+ "' ></span></label></div></td>"
                +"<td class='el-table_1_column_3 is-leaf' colspan='1' rowspan='1'><div class='cell'>" + d.name + "</div></td>"
                +"<td class='el-table_1_column_4 is-leaf' colspan='1' rowspan='1'><div class='cell'>" + d.username + "</div></td>"
                +"<td class='el-table_1_column_5 is-leaf' colspan='1' rowspan='1'><div class='cell'><img src="+d.userImg+" width='40px' height='40px'></div></td>"
                +"<td class='el-table_1_column_6 is-leaf' colspan='1' rowspan='1'><div class='cell'>"+d.phone+"</div></td>"
                +"<td class='el-table_1_column_7 is-leaf' colspan='1' rowspan='1'><div class='cell'>"+(d.state == 1 ? "启用":"禁用")+"</div></td>"
                +"<td class='el-table_1_column_8 is-leaf' colspan='1' rowspan='1'><div class='cell'>"+(d.gender == 1 ? "男" : "女")+"</div></td>"
                +"<td class='el-table_1_column_9 is-leaf' colspan='1' rowspan='1'><div class='cell'>"+d.createdTime+"</div></td>"
                +"<td class='el-table_1_column_10 is-leaf' colspan='1' rowspan='1'><div class='cell'>"+d.modifiedTime+"</div></td>"
                +"<td class='el-table_1_column_11 is-leaf' colspan='1' rowspan='1' style='width: 153px'><div>"
                +"<button type='button' class='el-button el-button--primary' onclick='changeValid(this)'>"+(d.state?"禁用":"启用")+"</button>"
                +"<button type='button' class='el-button--primary el-button el-button--update continue up'>修改</button></div></td></tr>";
            tbody.append(tr);
            //每一行上面绑定当前行数据
            $("#tbodyId tr").last().data("user",data[i]);
        }
        $(".el-button--update").on("click", addPage);
    }
    //修改状态
    function changeValid(btn){
        //找到当前行id
        var id =$(btn).parents('tr').find("input").val();
        var url = "user/updateValId";
        var state = $(btn).text() == '禁用' ? 0 : 1;
        var params = {id : id,state : state};
        $.get(url,params,function(result){
            commonShowTips(result.message);
            $(btn).text(state == 0 ? "启用" : "禁用");
            $(btn).parents('tr').children(":eq(5)").html("<div class='cell'>"+(state == 1 ? "启用":"禁用")+"</div>");
        })
    }
    /**
     * 多选框全选事件方法
     */
    function commonChoiceAll() {
        //$():$包起来的是jq对象，是一个dom数组
        //加下标：变成js对象
        var firstInp = $(".el-checkbox__input input[type='checkbox']:first");
        var checked = firstInp[0].checked;//加下标变js对象
        //:gt(0) --->选择下标大于0的元素
        $(".el-checkbox__input input[type='checkbox']:gt(0)").prop("checked", checked);
    }
</script>
<script src="api/member/member.js">
</script>